<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>注册</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/gloab.css" rel="stylesheet">
<link href="./css/index.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/index2.css"/>
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/register.js"></script>
<style type="text/css">

</style>
</head>
<body class="bgf4">
	<div class="titles">
		<p>张家口途乐客车租赁</p>
		<div class="title1">
			<a href="login.html">车主登录</a>
            <a href="../user/login.html">用户登录</a>

		</div>
	</div>
<div class="login-box f-mt10 f-pb50">
	<div class="main bgf">    
    	<div class="reg-box-pan display-inline">  
        	<div class="step">        	
                <ul>
                    <li class="col-xs-4 on">
                        <span class="num"><em class="f-r5"></em><i>1</i></span>                	
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">填写账户信息</p>
                    </li>
                    <li class="col-xs-4">
                        <span class="num"><em class="f-r5"></em><i>2</i></span>
                        <span class="line_bg lbg-l"></span>
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">验证账户信息</p>
                    </li>
                    <li class="col-xs-4">
                        <span class="num"><em class="f-r5"></em><i>3</i></span>
                        <span class="line_bg lbg-l"></span>
                        <p class="lbg-txt">注册成功</p>
                    </li>
                </ul>
            </div>
        	<div class="reg-box" id="verifyCheck" style="margin-top:20px;">
            	<div class="part1">                	
 
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>手机号：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" class="txt03 f-r3 required" keycodes="tel" tabindex="2" data-valid="isNonEmpty||isPhone" data-error="手机号码不能为空||手机号码格式不正确" maxlength="11" name="driver_name_n" id="phone" />
                            <span class="ie8 icon-close close hide"></span>                           
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">请填写11位有效的手机号码</label>
                            <label class="focus valid"></label>
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>密码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="password" id="password" name="password" maxlength="20" class="txt03 f-r3 required" tabindex="3" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="密码不能为空||密码长度6-20位||该密码太简单，有被盗风险，建议字母+数字的组合" />
                            <span class="ie8 icon-close close hide" style="right:55px"></span>
                            <span class="showpwd" data-eye="password"></span>                        
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">6-20位英文（区分大小写）、数字、字符的组合</label>
                            <label class="focus valid"></label>
                            <span class="clearfix"></span>
                            <label class="strength">
                            	<span class="f-fl f-size12">安全程度：</span>
                            	<b><i>弱</i><i>中</i><i>强</i></b>
                            </label>    
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>确认密码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="password" maxlength="20" class="txt03 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-16||isRepeat:password" data-error="密码不能为空||密码长度6-16位||两次密码输入不一致" id="rePassword" />
                            <span class="ie8 icon-close close hide" style="right:55px"></span>
                            <span class="showpwd" data-eye="rePassword"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">请再输入一遍上面的密码</label> 
                            <label class="focus valid"></label>                          
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" maxlength="4" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" id="randCode" data-valid="isNonEmpty" data-error="验证码不能为空" /> 
                            <span class="ie8 icon-close close hide"></span>
                            <label class="f-size12 c-999 f-fl f-pl10">
                            	<img src="./images/yzm.jpg" />
                            </label>                        
                            <label class="icon-sucessfill blank hide" style="left:380px"></label>
                            <label class="focusa">看不清？<a href="javascript:;" class="c-blue">换一张</a></label>   
                            <label class="focus valid" style="left:370px"></label>                        
                        </div>
                    </div>
                    <div class="item col-xs-12" style="height:auto">
                        <span class="intelligent-label f-fl">&nbsp;</span>  
                        <p class="f-size14 required"  data-valid="isChecked" data-error="请先同意条款"> 
                        	<input type="checkbox" checked /><a href="javascript:showoutc();" class="f-ml5">我已阅读并同意条款</a>
                        </p>                       
                        <label class="focus valid"></label> 
                    </div> 
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part1">下一步</a>                         
                        </div>
                    </div> 
                </div>
                <div class="part2" style="display:none">
                	<div class="alert alert-info" style="width:700px">短信已发送至您手机，请输入短信中的验证码，确保您的手机号真实有效。</div>                    
                    <div class="item col-xs-12 f-mb10" style="height:auto">
                        <span class="intelligent-label f-fl">手机号：</span>    
                        <div class="f-fl item-ifo c-blue">
                            18730324328
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" maxlength="6" id="verifyNo" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" data-valid="isNonEmpty||isInt" data-error="验证码不能为空||请输入6位数字验证码" /> 
                           	<span class="btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="width:97px;display:none;">发送验证码</span>
                            <span class="btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" style="width:97px;">发送验证码</span>
                            <span class="ie8 icon-close close hide" style="right:130px"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus"><span>请查收手机短信，并填写短信中的验证码（此验证码3分钟内有效）</span></label>   
                            <label class="focus valid"></label>                        
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part2">注册</a>                         
                        </div>
                    </div> 
                </div>
                <div class="part3" style="display:none">
                	<div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>真实姓名：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" maxlength="10" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:2-10||isZh" data-error="真实姓名不能为空||真实姓名长度2-10位||只能输入中文" id="driver_name" name="driver_name" />
                            <span class="ie8 icon-close close hide"></span>                         
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">2-10位，中文真实姓名</label>
                            <label class="focus valid"></label>
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>身份证号：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" class="txt03 f-r3 required" tabindex="2" data-valid="isNonEmpty||isCard" data-error="身份证号不能为空||身份证号码格式不正确" maxlength="18" id="driver_card" name="driver_card"/>
                            <span class="ie8 icon-close close hide"></span>                        
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">请填写18位有效的身份证号</label>
                            <label class="focus valid"></label>
                        </div>
                    </div>
					
					<div class="item col-xs-12">
						<span class="intelligent-label f-fl"><b class="ftx04">*</b>个人照片：</span>
						<a style="position: relative;right: 250px;">请选择</a>
					    <div class="f-fl item-ifo">
					    <input type="file" name="driver_personal" id="driver_personal" 
						accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="showimgs()"
						class="txt03 f-r3 required"
						style="opacity:0;">
						
					  </div>
					    
					</div>
					
					<div id="shows" style="width: 10px;height: 10px;">

					</div>
					
					<div class="item col-xs-12">
						<span class="intelligent-label f-fl"><b class="ftx04">*</b>驾驶证照片：</span>
						<a style="position: relative;right: 250px;">请选择</a>
					    <div class="f-fl item-ifo">
					    <input type="file" name="driver_certificate" id="driver_certificate" 
						accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="showimg()"
						class="txt03 f-r3 required"
						style="opacity:0;">
						
					  </div>
					    
					</div>
					
					<div id="show" style="width: 10px;height: 10px;">

					</div>
					
					
					
					
					
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part3">下一步</a>                         
                        </div>
                    </div>
                </div>  
                <div class="part4 text-center" style="display:none">
                	<h3>恭喜，您已注册成功</h3>
                    <p class="c-666 f-mt30 f-mb50">页面将在 <strong id="times" class="f-size18">10</strong> 秒钟后，跳转到首页</p>
                </div>          
            </div>
        </div>
    </div>
</div>
<div class="m-sPopBg" style="z-index:998;"></div>
<div class="m-sPopCon regcon">
	<div class="m-sPopTitle"><strong>服务协议条款</strong><b id="sPopClose" class="m-sPopClose" onClick="closeClause()">×</b></div>
    <div class="apply_up_content">
    	<pre class="f-r0">
		<strong>同意以下服务条款，提交注册信息</strong>
        </pre>
    </div>
    <center><a class="btn btn-blue btn-lg f-size12 b-b0 b-l0 b-t0 b-r0 f-pl50 f-pr50 f-r3" href="javascript:closeClause();">已阅读并同意此条款</a></center>
</div>
<script>
$(function(){	
	//第一页的确定按钮
	$("#btn_part1").click(function(){						
		if(!verifyCheck._click()) return;

        var driver_name_n = $("#phone").val();

        console.log(driver_name_n);
        $.ajax({
            type:"post",
            url:"/drivername",
            data : ({driver_name_n:driver_name_n}),
            success:function(data) {
                console.log(data);
                if(data.status==401){
                    alert("熔断开启，系统异常");
                    window.location.href="login.html";
                    return;
                }
                if(data.data=="") {
                    $(".part1").hide();
                    $(".part2").show();
                    $(".step li").eq(1).addClass("on");

                }
                if(data.data!="") {


                    alert("手机账号重复");
                    return;


                }
                if(data.status==null) {
                    alert("登陆异常");
                    window.location.href="login.html";
                    return;
                }
            }
        });
	});
	//第二页的确定按钮
	$("#btn_part2").click(function(){			
		if(!verifyCheck._click()) return;
		$(".part2").hide();
		$(".part3").show();	
	});	
	//第三页的确定按钮
	$("#btn_part3").click(function(){

        if($('#driver_name').val()==""){
            alert("请输入真实姓名");
            return;
        }else if($('#driver_card').val()==""){
            alert("请输入身份证号");
            return;

        }else if($('#driver_personal').val()==""){
            alert("请选择个人照片");
            return;

        }else if($('#driver_certificate').val()==""){
            alert("请选择驾驶证照片");
            return;

        }else {
            var driver_card = $("#driver_card").val();

            console.log(driver_card);

            $.ajax({
                type: "post",
                url: "/drivercard",
                data: ({driver_card: driver_card}),
                success: function (data) {
                    console.log(data);
                    if (data.status == 401) {
                        alert("熔断开启，系统异常");
                        window.location.href = "login.html";
                        return;
                    }
                    if (data.data == "") {
                        var driver_name_n = $("#phone").val();
                        var driver_password = $("#password").val();
                        var fordata = new FormData();
                        fordata.append('driver_name_n', $('#phone').val());
                        fordata.append('driver_password', $('#password').val());
                        fordata.append('driver_name', $('#driver_name').val());
                        fordata.append('driver_card', $('#driver_card').val());
                        fordata.append('driver_personal', $('#driver_personal')[0].files[0]);
                        fordata.append('driver_certificate', $('#driver_certificate')[0].files[0]);
                        console.log(fordata);
                        $.ajax({
                            type: "post",
                            url: "/insertdriver",
                            processData: false,
                            contentType: false,
                            cache: false,
                            async: false,
                            data: fordata,
                            success: function (data) {
                                console.log(data);
                                if (data.status == 401) {
                                    alert("熔断开启，系统异常");
                                    window.location.href = "login.html";
                                    return;
                                }
                                if (data.status == 200) {

                                    localStorage.setItem("driver_name_n", driver_name_n);
                                    localStorage.setItem("driver_password", driver_password);


                                    $(".part3").hide();
                                    $(".part4").show();
                                    $(".step li").eq(2).addClass("on");
                                    countdown({
                                        maxTime: 3,
                                        ing: function (c) {
                                            $("#times").text(c);
                                        },
                                        after: function () {

                                            window.location.href = "login.html";
                                        }
                                    });


                                    return;
                                }
                                if (data.status == 500) {
                                    alert("添加错误");
                                    window.location.href = "register.html";
                                    return;
                                }
                                if (data.status == null) {
                                    alert("修改异常");
                                    window.location.href = "register.html";
                                    return;
                                }
                                if (data.status == 20) {

                                    return;
                                }
                            }
                        });
                        return false;

                    }
                    if (data.data != "") {


                        alert("身份证号重复");
                        return;


                    }
                    if (data.status == null) {
                        alert("登陆异常");
                        window.location.href = "login.html";
                        return;
                    }
                }
            });


        }


	});

});
function showoutc(){$(".m-sPopBg,.m-sPopCon").show();}
function closeClause(){
	$(".m-sPopBg,.m-sPopCon").hide();		
}
</script>
<div style="text-align:center;">

</div>
<script type="text/javascript">
	function showimgs() {
		var filePath= $("#driver_personal").val();
		if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)){  
		    alert('"提示", "请上传图片（格式BMP、JPG、JPEG、PNG、GIF等）!"');  
		   }else{
	    
	    var url = null;
	    var fileimg = document.getElementById("driver_personal").files[0];
	    if(window.createObjectURL != undefined){
	    url = window.createOjcectURL(fileimg);
	    }
	    else if(window.URL != undefined){
	    	url = window.URL.createObjectURL(fileimg);
	    }else if(window.webkitURL != undefined){
	    	url = window.webkitURL.createObjectURL(fileimg)
	    }
	    var html ="";
	    html+='<img src="'+url+'" style="width: 100px;height: 100px;margin-left:400px;margin-top:-120px"/>';
	    $("#shows").html(html);
	}
	}
	
	function showimg() {
		var filePath= $("#driver_certificate").val();
		if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)){  
		    alert('"提示", "请上传图片（格式BMP、JPG、JPEG、PNG、GIF等）!"');  
		   }else{
	    
	    var url = null;
	    var fileimg = document.getElementById("driver_certificate").files[0];
	    if(window.createObjectURL != undefined){
	    url = window.createOjcectURL(fileimg);
	    }
	    else if(window.URL != undefined){
	    	url = window.URL.createObjectURL(fileimg);
	    }else if(window.webkitURL != undefined){
	    	url = window.webkitURL.createObjectURL(fileimg)
	    }
	    var html ="";
	    html+='<img src="'+url+'" style="width: 100px;height: 100px;margin-left:400px;margin-top:-120px"/>';
	    $("#show").html(html);
	}
	}
</script>
</body>
</html>
